<template>
    <view class="container">
        <view class="user-info">
            <view class="avatar">
                <image src="/static/avatar.png"></image>
            </view>
            <view class="user-detail">
                <text class="username">{{userInfo.username || '未登录'}}</text>
                <text class="phone">{{userInfo.phone || '未绑定手机号'}}</text>
            </view>
        </view>
        
        <view class="menu-list">
            <view class="menu-item" @click="toOrderList">
                <text class="icon"><i class="fa fa-list-alt"></i></text>
                <text class="title">我的订单</text>
                <text class="arrow"><i class="fa fa-angle-right"></i></text>
            </view>
            <view class="menu-item" @click="toAddressList">
                <text class="icon"><i class="fa fa-map-marker"></i></text>
                <text class="title">收货地址</text>
                <text class="arrow"><i class="fa fa-angle-right"></i></text>
            </view>
            <view class="menu-item" @click="toSettings">
                <text class="icon"><i class="fa fa-cog"></i></text>
                <text class="title">设置</text>
                <text class="arrow"><i class="fa fa-angle-right"></i></text>
            </view>
        </view>
        
        <view class="logout-btn" v-if="isLogin" @click="logout">
            退出登录
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            userInfo: {}
        }
    },
    computed: {
        isLogin() {
            return !!this.userInfo.username
        }
    },
    onLoad() {
        this.getUserInfo()
    },
    onShow() {
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            const userInfo = uni.getStorageSync('userInfo') || {}
            this.userInfo = userInfo
        },
        logout() {
            uni.showModal({
                title: '提示',
                content: '确定要退出登录吗？',
                success: (res) => {
                    if (res.confirm) {
                        uni.removeStorageSync('userInfo')
                        this.userInfo = {}
                        uni.showToast({
                            title: '已退出登录',
                            icon: 'none'
                        })
                    }
                }
            })
        },
        toOrderList() {
            if (!this.isLogin) {
                uni.navigateTo({
                    url: '/pages/login/login'
                })
                return
            }
            uni.navigateTo({
                url: '/pages/order-list/order-list'
            })
        },
        toAddressList() {
            if (!this.isLogin) {
                uni.navigateTo({
                    url: '/pages/login/login'
                })
                return
            }
            uni.navigateTo({
                url: '/pages/address-list/address-list'
            })
        },
        toSettings() {
            if (!this.isLogin) {
                uni.navigateTo({
                    url: '/pages/login/login'
                })
                return
            }
            uni.navigateTo({
                url: '/pages/settings/settings'
            })
        }
    }
}
</script>

<style>
.container {
    background-color: #f8f8f8;
    min-height: 100vh;
}
.user-info {
    background-color: white;
    padding: 40rpx;
    display: flex;
    align-items: center;
}
.avatar {
    width: 140rpx;
    height: 140rpx;
    border-radius: 70rpx;
    overflow: hidden;
}
.avatar image {
    width: 100%;
    height: 100%;
}
.user-detail {
    margin-left: 30rpx;
}
.username {
    font-size: 32rpx;
    font-weight: bold;
}
.phone {
    font-size: 28rpx;
    color: #666;
    margin-top: 10rpx;
}
.menu-list {
    margin-top: 30rpx;
    background-color: white;
}
.menu-item {
    height: 100rpx;
    line-height: 100rpx;
    padding: 0 40rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #eee;
}
.menu-item .icon {
    width: 60rpx;
    font-size: 32rpx;
    color: #007AFF;
}
.menu-item .title {
    flex: 1;
    font-size: 30rpx;
    margin-left: 20rpx;
}
.menu-item .arrow {
    width: 40rpx;
    text-align: right;
    font-size: 32rpx;
    color: #999;
}
.logout-btn {
    background-color: white;
    color: #007AFF;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 32rpx;
    margin-top: 60rpx;
}
</style>    